<template>
  <div class="article-edit">
    <div class="page-header">
      <div class="header-left">
        <el-button icon="ArrowLeft" @click="handleBack">返回</el-button>
        <h1>{{ isEdit ? '编辑文章' : '新建文章' }}</h1>
      </div>
      <div class="header-actions">
        <el-button @click="handleSaveDraft" :loading="saving">
          保存草稿
        </el-button>
        <el-button type="primary" @click="handlePublish" :loading="publishing">
          {{ isEdit ? '更新并发布' : '发布' }}
        </el-button>
      </div>
    </div>
    <div class="content-wrapper">
      <el-row :gutter="24">
        <!-- 主要内容 -->
        <el-col :span="17">
          <div class="main-content-card">
          <el-form
            ref="formRef"
            :model="form"
            :rules="formRules"
            label-width="100px"
          >
            <el-form-item label="文章标题" prop="title">
              <el-input
                v-model="form.title"
                placeholder="请输入文章标题"
                size="large"
              />
            </el-form-item>
            
            <el-form-item label="副标题" prop="subtitle">
              <el-input
                v-model="form.subtitle"
                placeholder="请输入副标题（可选）"
              />
            </el-form-item>
            
            <el-form-item label="文章别名" prop="alias">
              <el-input
                v-model="form.alias"
                placeholder="请输入文章别名（用于URL）"
              />
            </el-form-item>
            
            <el-form-item label="文章内容" prop="content">
              <EditorSelector
                ref="editorRef"
                v-model="form.content"
                v-model:editor-type="editorType"
                :placeholder="'请输入文章内容...'"
                :height="600"
                :show-type-selector="true"
                :show-actions="true"
                :show-word-count="true"
                :show-status-bar="true"
                :show-preview="true"
                :sync-scroll="true"
                :theme="editorTheme"
                :editor-mode="editorMode"
                :upload-url="uploadUrl"
                :upload-headers="uploadHeaders"
                :max-length="maxContentLength"
                :auto-save="autoSave"
                :auto-save-interval="autoSaveInterval"
                @change="handleContentChange"
                @save="handleAutoSave"
                @focus="handleEditorFocus"
                @blur="handleEditorBlur"
                @ready="handleEditorReady"
              />
            </el-form-item>
          </el-form>
          </div>
        </el-col>

        <!-- 侧边栏 -->
        <el-col :span="7">
          <!-- 发布设置 -->
          <div class="sidebar-card">
            <div class="card-header">
              <span>发布设置</span>
            </div>
          
          <el-form :model="form" label-width="80px" size="small">
            <el-form-item label="所属站点" prop="siteId">
              <el-select
                v-model="form.siteId"
                placeholder="选择站点"
                @change="handleSiteChange"
                style="width: 100%"
              >
                <el-option
                  v-for="site in sites"
                  :key="site.id"
                  :label="site.name"
                  :value="site.id"
                />
              </el-select>
            </el-form-item>
            
            <el-form-item label="所属栏目" prop="channelId">
              <el-select
                v-model="form.channelId"
                placeholder="选择栏目"
                style="width: 100%"
              >
                <el-option
                  v-for="channel in channels"
                  :key="channel.id"
                  :label="channel.name"
                  :value="channel.id"
                />
              </el-select>
            </el-form-item>
            
            <el-form-item label="发布时间">
              <el-date-picker
                v-model="form.publishDate"
                type="datetime"
                placeholder="选择发布时间"
                style="width: 100%"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
            
            <el-form-item label="文章状态">
              <el-select v-model="form.status" style="width: 100%">
                <el-option label="草稿" :value="10" />
                <el-option label="待发布" :value="5" />
                <el-option label="已发布" :value="0" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="允许评论">
              <el-switch
                v-model="form.allowComment"
                :active-value="1"
                :inactive-value="0"
              />
            </el-form-item>
          </el-form>
          </div>

          <!-- 文章信息 -->
          <div class="sidebar-card">
            <div class="card-header">
              <span>文章信息</span>
            </div>
          
          <el-form :model="form" label-width="80px" size="small">
            <el-form-item label="作者">
              <el-input v-model="form.author" placeholder="请输入作者">
                <template #append>
                  <el-button @click="setCurrentUserAsAuthor" type="primary" size="small">
                    使用当前用户
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item label="编辑">
              <el-input v-model="form.editor" placeholder="请输入编辑" />
            </el-form-item>
            
            <el-form-item label="来源">
              <el-input v-model="form.source" placeholder="请输入来源" />
            </el-form-item>

            <el-form-item label="文章模板">
              <el-select v-model="form.articleTemplate" placeholder="请选择文章模板" clearable>
                <el-option label="默认模板" value="default" />
                <el-option label="新闻模板" value="news" />
                <el-option label="公告模板" value="notice" />
                <el-option label="产品介绍模板" value="product" />
                <el-option label="活动模板" value="activity" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="排序">
              <el-input-number
                v-model="form.orderNum"
                :min="0"
                style="width: 100%"
              />
            </el-form-item>
          </el-form>
          </div>

          <!-- 特色图片 -->
          <div class="sidebar-card">
            <div class="card-header">
              <span>特色图片</span>
            </div>
          
          <div class="image-upload">
            <div v-if="form.image" class="image-preview">
              <img :src="form.image" alt="特色图片" />
              <div class="image-actions">
                <el-button size="small" @click="selectImage" :loading="imageUploading">
                  {{ imageUploading ? '上传中...' : '更换' }}
                </el-button>
                <el-button size="small" type="danger" @click="removeImage" :disabled="imageUploading">删除</el-button>
              </div>
            </div>
            <div v-else class="image-placeholder" @click="selectImage" :class="{ 'uploading': imageUploading }">
              <el-icon v-if="!imageUploading"><Plus /></el-icon>
              <el-icon v-else class="is-loading"><Loading /></el-icon>
              <span>{{ imageUploading ? '上传中...' : '选择特色图片' }}</span>
            </div>
          </div>
          </div>

          <!-- 图片选择对话框 -->
          <el-dialog
            v-model="imageDialogVisible"
            title="选择图片"
            width="800px"
            :close-on-click-modal="false"
          >
            <div class="image-selector">
              <div class="upload-area">
                <el-upload
                  ref="uploadRef"
                  :auto-upload="false"
                  :show-file-list="false"
                  accept="image/*"
                  :on-change="handleImageSelect"
                  drag
                >
                  <el-icon class="el-icon--upload"><Upload /></el-icon>
                  <div class="el-upload__text">
                    将图片拖拽到此处，或<em>点击上传</em>
                  </div>
                  <template #tip>
                    <div class="el-upload__tip">
                      支持 jpg/png/gif/webp 格式，文件大小不超过 {{ FILE_SIZE_LIMITS.IMAGE }}MB
                    </div>
                  </template>
                </el-upload>
              </div>

              <div class="image-preview-area" v-if="selectedImageFile">
                <h4>预览</h4>
                <div class="preview-container">
                  <img :src="selectedImagePreview" alt="预览图片" />
                  <div class="image-info">
                    <p><strong>文件名：</strong>{{ selectedImageFile.name }}</p>
                    <p><strong>大小：</strong>{{ formatFileSize(selectedImageFile.size) }}</p>
                    <p><strong>类型：</strong>{{ selectedImageFile.type }}</p>
                  </div>
                </div>
              </div>
            </div>

            <template #footer>
              <div class="dialog-footer">
                <el-button @click="imageDialogVisible = false">取消</el-button>
                <el-button
                  type="primary"
                  @click="confirmImageUpload"
                  :loading="imageUploading"
                  :disabled="!selectedImageFile"
                >
                  {{ imageUploading ? '上传中...' : '确认上传' }}
                </el-button>
              </div>
            </template>
          </el-dialog>

          <!-- SEO设置 -->
          <div class="sidebar-card">
            <div class="card-header">
              <span>SEO设置</span>
            </div>
          
          <el-form :model="form.articleExt" label-width="80px" size="small">
            <el-form-item label="SEO标题">
              <el-input
                v-model="form.articleExt.seoTitle"
                placeholder="请输入SEO标题"
              />
            </el-form-item>
            
            <el-form-item label="SEO关键词">
              <el-input
                v-model="form.articleExt.seoKeywords"
                type="textarea"
                :rows="2"
                placeholder="请输入SEO关键词"
              />
            </el-form-item>
            
            <el-form-item label="SEO描述">
              <el-input
                v-model="form.articleExt.seoDescription"
                type="textarea"
                :rows="3"
                placeholder="请输入SEO描述"
              />
            </el-form-item>
          </el-form>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { articleApi } from '@/api/article'
import { channelApi } from '@/api/channel'
import * as ossApi from '@/api/oss'
import { siteApi } from '@/api/site'
import EditorSelector from '@/components/Editor/EditorSelector.vue'
import { FILE_SIZE_LIMITS, formatFileSize, validateImageFile } from '@/config/upload'
import { useUserStore } from '@/stores/user'
import type { Article, ArticleExt, Channel, Site } from '@/types/api'
import {
  Loading,
  Plus,
  Upload
} from '@element-plus/icons-vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const formRef = ref<FormInstance>()
const editorRef = ref()
const saving = ref(false)
const publishing = ref(false)
const imageUploading = ref(false)
const imageDialogVisible = ref(false)
const selectedImageFile = ref<File | null>(null)
const selectedImagePreview = ref('')

// 编辑器相关配置
const editorType = ref<'rich' | 'markdown'>('rich')
const editorTheme = ref<'light' | 'dark' | 'auto'>('auto')
const editorMode = ref<'normal' | 'vim'>('normal')
const uploadUrl = ref('/api/upload/image')
const uploadHeaders = ref({})
const maxContentLength = ref(0)
const autoSave = ref(true)
const autoSaveInterval = ref(30)

// 是否编辑模式
const isEdit = computed(() => !!route.params.id)

// 站点和栏目数据
const sites = ref<Site[]>([])
const channels = ref<Channel[]>([])

// 表单数据
const form = reactive<Partial<Article>>({
  title: '',
  subtitle: '',
  alias: '',
  siteId: undefined,
  channelId: undefined,
  userId: undefined,
  author: '',
  editor: '',
  source: '',
  image: '',
  status: 10,
  publishDate: '',
  allowComment: 1,
  orderNum: 0,
  markdown: '',
  articleExt: {
    content: '',
    seoTitle: '',
    seoKeywords: '',
    seoDescription: '',
  } as Partial<ArticleExt>,
})

// 表单验证规则
const formRules: FormRules = {
  title: [
    { required: true, message: '请输入文章标题', trigger: 'blur' },
    { min: 1, max: 200, message: '标题长度在 1 到 200 个字符', trigger: 'blur' },
  ],
  siteId: [
    { required: true, message: '请选择所属站点', trigger: 'change' },
  ],
  channelId: [
    { required: true, message: '请选择所属栏目', trigger: 'change' },
  ],
}

// 移除了 editor 变量，改用直接操作 DOM

// 获取站点列表
const getSites = async () => {
  try {
    // 调用站点树形结构API
    const result = await siteApi.getSiteTree()

    if (result.code === 0) {
      sites.value = result.data || []
      console.log('获取站点列表成功:', sites.value)
    } else {
      console.error('获取站点列表失败:', result.msg)
    }
  } catch (error) {
    console.error('获取站点列表失败:', error)
  }
}

// 获取栏目列表
const getChannels = async (siteId: number) => {
  try {
    // 根据站点ID获取栏目树形结构
    const result = await channelApi.getChannelTree(siteId)

    if (result.code === 0) {
      channels.value = result.data || []
      console.log('获取栏目列表成功:', channels.value)
    } else {
      console.error('获取栏目列表失败:', result.msg)
    }
  } catch (error) {
    console.error('获取栏目列表失败:', error)
  }
}

// 获取文章详情
const getArticleDetail = async (id: number | string) => {
  try {
    // 确保ID是字符串类型，避免精度丢失
    const articleId = String(id)
    console.log('正在获取文章详情，ID:', articleId)

    // 调用文章详情API
    const result = await articleApi.getArticle(articleId)
    console.log('API响应:', result)

    // 检查响应是否成功
    if (result.code !== 0) {
      console.error('API返回错误:', result.msg)
      ElMessage.error(result.msg || '获取文章详情失败')
      router.push('/content/article')
      return
    }

    const article = result.data
    console.log('获取到的文章数据:', article)
    if (!article) {
      ElMessage.error('文章不存在')
      router.push('/content/article')
      return
    }

    // 填充表单数据
    Object.assign(form, article)

    // 如果有站点ID，获取对应的栏目列表
    if (article.siteId) {
      await getChannels(article.siteId)
    }

    // 设置编辑器内容
    console.log('文章扩展信息:', article.articleExt)

    // 根据内容类型设置编辑器类型和内容
    let content = ''
    if (article.articleExt?.content) {
      content = article.articleExt.content
      editorType.value = 'rich'
      console.log('设置富文本编辑器内容:', content.substring(0, 100) + '...')
    } else if (article.markdown) {
      content = article.markdown
      editorType.value = 'markdown'
      console.log('设置Markdown编辑器内容:', content.substring(0, 100) + '...')
    } else {
      console.warn('未找到文章内容')
      content = ''
    }

    // 设置表单内容字段
    form.content = content

    // 等待编辑器初始化后设置内容
    nextTick(() => {
      setEditorContent(content)
    })
  } catch (error: any) {
    console.error('获取文章详情失败:', error)
    console.error('错误详情:', {
      status: error.response?.status,
      data: error.response?.data,
      message: error.message
    })

    // 处理HTTP错误
    if (error.response?.status === 404) {
      ElMessage.error('文章不存在')
    } else if (error.response?.data?.msg) {
      ElMessage.error(error.response.data.msg)
    } else {
      ElMessage.error('获取文章详情失败，请重试')
    }

    router.push('/content/article')
  }
}

// 处理站点变更
const handleSiteChange = (siteId: number) => {
  form.channelId = undefined
  if (siteId) {
    getChannels(siteId)
  } else {
    channels.value = []
  }
}

// 编辑器事件处理
const handleContentChange = (content: string) => {
  console.log('编辑器内容变化:', content.length, '字符')

  // 根据编辑器类型更新对应的字段
  if (editorType.value === 'rich') {
    if (!form.articleExt) {
      form.articleExt = {}
    }
    form.articleExt.content = content
  } else {
    form.markdown = content
  }
}

const handleAutoSave = (content: string) => {
  console.log('自动保存触发:', content.length, '字符')
  // 这里可以实现自动保存逻辑
  if (autoSave.value && isEdit.value) {
    // 延迟保存，避免频繁请求
    setTimeout(() => {
      saveArticle(false) // false表示不显示成功提示
    }, 1000)
  }
}

const handleEditorFocus = () => {
  console.log('编辑器获得焦点')
}

const handleEditorBlur = () => {
  console.log('编辑器失去焦点')
}

const handleEditorReady = () => {
  console.log('编辑器初始化完成')

  // 设置上传配置
  uploadHeaders.value = {
    'Authorization': `Bearer ${userStore.token || ''}`
  }
}

// 设置编辑器内容
const setEditorContent = (content: string) => {
  console.log('设置编辑器内容，长度:', content?.length)

  // 使用新的编辑器组件方法
  if (editorRef.value?.setContent) {
    editorRef.value.setContent(content)
  } else {
    // 如果编辑器还未初始化，直接设置到表单数据
    form.content = content
  }
}

// 获取编辑器内容
const getEditorContent = () => {
  return editorRef.value?.getContent?.() || form.content || ''
}

// 设置当前用户为作者
const setCurrentUserAsAuthor = () => {
  if (userStore.userInfo?.realName || userStore.userInfo?.username) {
    form.author = userStore.userInfo.realName || userStore.userInfo.username
    ElMessage.success('已设置当前用户为作者')
  } else {
    ElMessage.warning('无法获取当前用户信息')
  }
}

// 选择图片
const selectImage = () => {
  imageDialogVisible.value = true
  selectedImageFile.value = null
  selectedImagePreview.value = ''
}

// 上传特色图片
const uploadFeaturedImage = async (file: File) => {
  // 使用统一的图片验证
  const validation = validateImageFile(file)
  if (!validation.valid) {
    ElMessage.error(validation.error!)
    return
  }

  try {
    imageUploading.value = true

    // 使用本地附件上传接口
    const response = await ossApi.uploadFile(file, form.siteId)

    if (response.url) {
      form.image = response.url
      ElMessage.success('图片上传成功')
    } else {
      ElMessage.error('图片上传失败：未获取到图片URL')
    }
  } catch (error: any) {
    console.error('图片上传失败:', error)
    ElMessage.error('图片上传失败：' + (error.message || '未知错误'))
  } finally {
    imageUploading.value = false
  }
}

// 处理图片选择
const handleImageSelect = (file: any) => {
  const rawFile = file.raw

  // 使用统一的图片验证
  const validation = validateImageFile(rawFile)
  if (!validation.valid) {
    ElMessage.error(validation.error!)
    return
  }

  selectedImageFile.value = rawFile

  // 创建预览
  const reader = new FileReader()
  reader.onload = (e) => {
    selectedImagePreview.value = e.target?.result as string
  }
  reader.readAsDataURL(rawFile)
}

// 确认上传图片
const confirmImageUpload = async () => {
  if (!selectedImageFile.value) return

  await uploadFeaturedImage(selectedImageFile.value)
  imageDialogVisible.value = false
}

// formatFileSize 已从 @/config/upload 导入

// 删除图片
const removeImage = () => {
  form.image = ''
}

// 处理返回
const handleBack = () => {
  router.back()
}

// 通用保存方法
const saveArticle = async (showMessage = true) => {
  if (!formRef.value) return false

  try {
    await formRef.value.validate()

    // 获取编辑器内容
    const content = getEditorContent()

    // 根据编辑器类型设置内容
    if (editorType.value === 'rich') {
      if (!form.articleExt) {
        form.articleExt = {}
      }
      form.articleExt.content = content
    } else {
      form.markdown = content
    }

    // 设置用户ID
    if (!form.userId && userStore.userInfo?.id) {
      form.userId = userStore.userInfo.id
    }

    let response
    if (isEdit.value) {
      // 更新文章 - 使用字符串ID避免精度丢失
      const articleId = route.params.id as string
      console.log('更新文章ID:', articleId)
      response = await articleApi.updateArticle(articleId, form)
    } else {
      // 创建文章
      console.log('准备创建文章，表单数据:', form)
      response = await articleApi.createArticle(form)
    }

    if (response.code === 0) {
      if (showMessage) {
        ElMessage.success('保存成功')
      }

      // 如果是新建文章，跳转到列表页
      if (!isEdit.value) {
        router.replace('/content/article')
      }

      return true
    } else {
      throw new Error(response.msg || '保存失败')
    }
  } catch (error: any) {
    console.error('保存失败:', error)
    if (showMessage) {
      ElMessage.error(error.message || '保存失败，请重试')
    }
    return false
  }
}

// 处理保存草稿
const handleSaveDraft = async () => {
  saving.value = true
  try {
    // 设置为草稿状态
    form.status = 10
    await saveArticle()
  } finally {
    saving.value = false
  }
}

// 处理发布
const handlePublish = async () => {
  publishing.value = true
  try {
    // 设置为发布状态
    form.status = 0
    if (!form.publishDate) {
      // 格式化为后端期望的格式：yyyy-MM-dd HH:mm:ss
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const day = String(now.getDate()).padStart(2, '0')
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')
      const seconds = String(now.getSeconds()).padStart(2, '0')
      form.publishDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    }

    const success = await saveArticle()
    if (success) {
      ElMessage.success(isEdit.value ? '更新并发布成功' : '发布成功')
      router.push('/content/article')
    }
  } catch (error: any) {
    console.error('发布失败:', error)
    ElMessage.error(error.message || '发布失败，请重试')
  } finally {
    publishing.value = false
  }
}

onMounted(async () => {
  await getSites()

  // 设置当前用户ID
  if (userStore.userInfo?.id) {
    form.userId = userStore.userInfo.id
  } else {
    // 如果没有用户信息，设置默认值
    form.userId = 1
  }

  if (isEdit.value) {
    // 使用字符串类型的ID，避免精度丢失
    await getArticleDetail(route.params.id as string)
  } else {
    // 新建文章时设置默认作者为当前用户
    if (userStore.userInfo?.realName || userStore.userInfo?.username) {
      form.author = userStore.userInfo.realName || userStore.userInfo.username
    }
  }

  // 从localStorage加载编辑器设置
  try {
    const savedSettings = localStorage.getItem('editor-settings')
    if (savedSettings) {
      const settings = JSON.parse(savedSettings)
      editorType.value = settings.defaultEditor || 'rich'
      editorTheme.value = settings.theme || 'auto'
      editorMode.value = settings.editorMode || 'normal'
      autoSave.value = settings.autoSave || false
      autoSaveInterval.value = settings.autoSaveInterval || 30
    }
  } catch (error) {
    console.error('加载编辑器设置失败:', error)
  }

  await nextTick()
  console.log('文章编辑页面初始化完成')
})

onUnmounted(() => {
  // 清理工作（如果需要的话）
  console.log('组件卸载')
})
</script>

<style scoped lang="scss">
.article-edit {
  padding: 24px;
  background: #f8f9fa;
  min-height: 100vh;

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    .header-left {
      display: flex;
      align-items: center;
      gap: 12px;

      h1 {
        font-size: 20px;
        color: #2c3e50;
        margin: 0;
      }
    }

    .header-actions {
      display: flex;
      gap: 12px;
    }
  }
  
  .content-wrapper {
    padding: 0 24px;
  }

  .main-content-card {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e8eaed;
    min-height: 800px;

    .el-form-item {
      margin-bottom: 24px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .sidebar-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e8eaed;

    .card-header {
      font-size: 16px;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid #f0f0f0;
    }
  }

  // 编辑器样式由组件自身提供

  .markdown-editor {
    padding: 0;

    .el-textarea {
      .el-textarea__inner {
        min-height: 600px !important;
        padding: 20px;
        font-size: 15px;
        line-height: 1.8;
        border: none;
        border-radius: 0;
        resize: vertical;
      }
    }
  }

  .image-upload {
    .image-preview {
      position: relative;
      
      img {
        width: 100%;
        height: 120px;
        object-fit: cover;
        border-radius: 4px;
      }
      
      .image-actions {
        position: absolute;
        top: 8px;
        right: 8px;
        display: flex;
        gap: 4px;
      }
    }
    
    .image-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 120px;
      border: 2px dashed #dcdfe6;
      border-radius: 4px;
      cursor: pointer;
      color: #909399;
      transition: all 0.3s ease;

      &:hover:not(.uploading) {
        border-color: #409eff;
        color: #409eff;
      }

      &.uploading {
        border-color: #409eff;
        color: #409eff;
        cursor: not-allowed;
        background-color: #f0f9ff;
      }

      .el-icon {
        font-size: 24px;
        margin-bottom: 8px;

        &.is-loading {
          animation: rotating 2s linear infinite;
        }
      }

      span {
        font-size: 14px;
      }
    }
  }

  // 图片选择对话框样式
  .image-selector {
    .upload-area {
      margin-bottom: 24px;

      .el-upload {
        width: 100%;
      }

      .el-upload-dragger {
        width: 100%;
        height: 180px;
      }
    }

    .image-preview-area {
      h4 {
        margin: 0 0 16px 0;
        color: #303133;
        font-size: 16px;
        font-weight: 600;
      }

      .preview-container {
        display: flex;
        gap: 20px;

        img {
          width: 200px;
          height: 150px;
          object-fit: cover;
          border-radius: 8px;
          border: 1px solid #dcdfe6;
        }

        .image-info {
          flex: 1;

          p {
            margin: 0 0 8px 0;
            color: #606266;
            font-size: 14px;

            strong {
              color: #303133;
            }
          }
        }
      }
    }
  }

  // 响应式设计
  @media (max-width: 1200px) {
    .content-wrapper {
      padding: 0 16px;
    }

    .main-content-card {
      padding: 24px;
    }

    .sidebar-card {
      padding: 20px;
    }
  }

  @media (max-width: 768px) {
    .article-edit {
      padding: 16px;

      .page-header {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;

        .header-left {
          justify-content: center;
        }

        .header-actions {
          justify-content: center;
        }
      }

      .content-wrapper {
        padding: 0;
      }

      .main-content-card {
        padding: 16px;
        margin-bottom: 16px;
      }

      .sidebar-card {
        padding: 16px;
        margin-bottom: 16px;
      }

      .editor-content {
        min-height: 300px;
        padding: 12px;
      }
    }
  }
}

// 动画
@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
